<template>
    <div class="container">
        <div class="header-c">
            <div class="header-l">
                <i class="icon mt-location-o" :style="{color: '#434343', 'font-size': 38 + 'rpx'}"></i>
                <span>{{city}}</span>
            </div>
            <div class="header-r">
                <div class="search-bar">
                    <i class="icon mt-search-o"></i>
                    <input placeholder="请输入收货地址" placeholder-style="font-size: 24rpx" v-model="inputSeach" @input="bindInpt()" />
                    <div class="cancle">
                        <i class="icon qb-icon-cancle-o"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="addressList">
            <div v-for="(item,index) in addressList" :key="index" class="add_" @click="getAddress(item.name,item.location)">
                <span class="address_name">{{item.name}}</span>
                <span class="address_desc">{{item.district}}{{item.address}}</span>
            </div>
        </div>
        <div class="location-c" :class="[addressList!=''?'none':'']">
            <span class="c-l">{{address}}</span>
            <div class="c-r" @click="backhome">
                <i class="icon mt-relocation-o"></i>
                <span>重新定位</span>
            </div>
        </div>

        <!-- 我的收货地址 -->
        <div class="my-address" v-if="isLogin">
            <div class="header">
                <i class="icon mt-myhome-o"></i>
                <span>我的收获地址</span>
            </div>
            <div class="list-c">
                <div class="item" v-for="(item, index) in myAddress" :key="index" @click="selectMyAddress(item)">
                    <span class="i-t">{{item.address}}</span>
                    <div class="i-b">
                        <span class="b-l">{{item.addressee}}</span>
                        <span class="b-r">{{item.phone}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="nearby-address" :class="[addressList!=''?'none':'']">
            <div class="header">
                <i class="icon mt-location-o"></i>
                <span>附近地址</span>
            </div>
            <div class="list-c">
                <div class="item" v-for="(item, index) in nearbyAddress" :key="index" @click="getNearTo(item.address,item.location)">
                    <span>{{item.address}}</span>
                    <!-- <span>{{item.name}}</span> -->
                </div>
            </div>
        </div>
        <div class="footer-c" @click="addAddress" :class="[addressList!=''?'none':'']" v-if="isLogin">
            <i class="icon mt-add-o"></i>
            <span>新增收货地址</span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                seach1: '',
                addressList: [],
                weidu: '',
                jingdu: '',
                inputSeach: '', //输入地址
                address: '', //当前地址
                city: '', //当前城市
                cityData: {},
                myAddress: [],
                nearbyAddress: [],
                isLogin: false,

            }
        },
        onLoad(options) {
            this.isLogin = this.$store.state.user.islogin
            Object.assign(this.$data, this.$options.data())
            var address = this.$store.state.user.address
            var city = wx.getStorageSync('city')
            this.address = address
            this.city = city
            this.getadress()
        },
        onShow() {
            this.isLogin = this.$store.state.user.islogin
            if (this.$store.state.user.islogin) {
                this.getSelfAddress()
            }
        },

        methods: {
            //选取个人收获地址
            selectMyAddress(item) {
                this.$store.state.user.addressType='home'
                var name = item.address
                var jingdu = item.addresslng
                var weidu = item.addresslat

                wx.setStorageSync('latitude', weidu)
                wx.setStorageSync('longitude', jingdu)
                wx.setStorageSync('searchData', name)
                wx.switchTab({
                    url: '/pages/index/main',
                })
            },
            // 获取个人收货地址
            getSelfAddress() {
                let getParams = {
                    url: '/miniprogramOrder/userAddressList',
                    data: {
                        userId: wx.getStorageSync('userId'),
                    },
                    method: 'POST',
                }
                this.$JZWX(getParams).then(re => {
                    this.myAddress = re.data
                    if (this.myAddress.length > 0) {
                        this.isLogin = true
                    }
                })
            },

            //获取地址
            getAddress(name, jingweidu) {
                this.$store.state.user.addressType ='home'
                if (jingweidu.length == 0) {
                    return false
                } else {
                    var jwd = jingweidu.split(',')
                    wx.setStorageSync('latitude', jwd[1])
                    wx.setStorageSync('longitude', jwd[0])
                    wx.setStorageSync('searchData', name)
                    wx.switchTab({
                        url: '/pages/index/main',
                    })
                }
            },

            //获取经纬度
            //获取附近地址
            getadress() {
                var that = this
                wx.getLocation({
                    type: 'wgs84',
                    success: function(res) {
                        var latitude = res.latitude
                        var longitude = res.longitude
                        that.weidu = latitude
                        that.jingdu = longitude
                        wx.request({
                            url:
                                'https://restapi.amap.com/v3/place/around?key=e80eace082b331e7da1bce2f3d7b73ec&keywords=' +
                                that.seach1 +
                                '&location=' +
                                that.jingdu +
                                ',' +
                                that.weidu,
                            success(res) {
                                that.nearbyAddress = res.data.pois
                            },
                        })
                    },
                })
            },
            getA() {
                if (this.jingdu != '' || this.weidu != '') {
                    this.GetNearAddress()
                }
            },
            //获取附近地址并带到首页
            getNearTo(name, jingweidu) {
                this.$store.state.user.addressType='home'
                if (jingweidu.length == 0) {
                    return false
                } else {
                    var jwd = jingweidu.split(',')
                    wx.setStorageSync('latitude', jwd[1])
                    wx.setStorageSync('longitude', jwd[0])
                    wx.setStorageSync('searchData', name)
                    wx.switchTab({
                        url: '/pages/index/main',
                    })
                }
            },
            //用户输入
            bindInpt() {
                var seach = this.inputSeach
                var that = this
                wx.request({
                    url:
                        'https://restapi.amap.com/v3/assistant/inputtips?key=e80eace082b331e7da1bce2f3d7b73ec&keywords=' +
                        seach +
                        '&location=' +
                        this.jingdu +
                        ',' +
                        this.weidu +
                        '&city=' +
                        this.city +
                        '&datatype=all',
                    success(res) {
                        var arr=res.data.tips
                        that.addressList = res.data.tips.reverse()
                    },
                })
            },
            addAddress() {
                wx.navigateTo({url: '/pages/addAddress/main'})
            },
            backhome() {
                this.$store.state.user.addressType='home'
                wx.switchTab({
                    url: '/pages/index/main',
                    success: function(e) {
                        wx.removeStorageSync('latitude')
                        wx.removeStorageSync('searchData')
                        wx.removeStorageSync('longitude')
                    },
                })
            },
        },
        mounted() {},
        created() {},
    }
</script>

<style lang="scss" scoped>
  @import "selectAddress";
</style>


